<template>
  <div class="banner-add">
    <el-page-header @back="$goBack" :content="pageTitle" />
    <el-form :model="form" :rules="rules" ref="formRef">
      <el-form-item label="图片" prop="image">
        <xu-upload v-model="form.image" />
      </el-form-item>
      <el-form-item label="标题" prop="title">
        <el-input
          v-model="form.title"
          placeholder="请输入标题"
          style="width: 400px"
        />
      </el-form-item>
      <el-form-item label="链接" prop="url">
        <el-input
          v-model="form.url"
          placeholder="https://www.johnxu.net"
          style="width: 400px"
        />
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model="form.sort" style="width: 120px" />
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-select v-model="form.type" placeholder="请选择">
          <el-option
            v-for="option in typeOptions"
            :key="option.value"
            :value="option.value"
            :label="option.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-switch active-value="1" inactive-value="0" v-model="form.status" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit" :loading="loading"
          >提交</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import XuUpload from '../../../components/xu-upload.vue'
import { BannerActionsEnum, BannerTypeEnum } from '../../../_/vue/store/banner'
export default {
  components: { XuUpload },
  data () {
    return {
      id: '',
      loading: false,
      pageTitle: '添加轮播',
      form: {
        title: '',
        image: '',
        url: '',
        status: '1',
        type: 'web',
        sort: 0
      },
      rules: {
        title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
        image: [{ required: true, message: '图片不能为空', trigger: 'blur' }]
      },
      typeOptions: [
        { label: '电脑', value: BannerTypeEnum.WEB },
        { label: '手机', value: BannerTypeEnum.H5 }
      ]
    }
  },
  async mounted () {
    if (this.$route.query.id) {
      this.id = this.$route.query.id
      const { data } = await this.edit(this.id)
      this.form = data
    }
  },
  methods: {
    ...mapActions({
      edit: BannerActionsEnum.EDIT,
      save: BannerActionsEnum.SAVE,
      store: BannerActionsEnum.STORE
    }),
    handleSubmit () {
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          this.loading = true
          try {
            if (this.id) {
              await this.save({ id: this.id, data: this.form })
            } else {
              await this.store(this.form)
            }
            this.$message.success('操作成功')
            this.$goBack()
          } catch (err) {
            console.log(err)
          }
          this.loading = false
        }
        return false
      })
    }
  }
}
</script>
